<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.transposing.code')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.locationshiftcode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.createdate')" :label-width="formLabelWidth">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="formInline.createdate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder
              end-placeholder
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item label="SKU" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.transposing.finish')" :label-width="formLabelWidth">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="formInline.modifydate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder
              end-placeholder
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.creator')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.creator" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="table"
          stripe
          empty-text
          fits
          v-loading="tableLoading"
          class="single-select-table"
          :data="tableData"
          :row-style="tableRowStyle"
          :row-class-name="tableRowClassName"
          @row-click="rowClick"
          @selection-change="handleSingleSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column
            align="center"
            prop="locationshiftcode"
            :label="$t('m.transposing.code')"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click.stop="toInfo(scope.row.locationshiftid)"
                v-if="hasPermission('table-check')"
              >{{scope.row.locationshiftcode}}</el-button>
            </template>
          </el-table-column>
          <el-table-column :label="$t('m.state')" width="100" align="center" prop="state">
            <template slot-scope="scope">{{scope.row.state|stateFilter(lan)}}</template>
          </el-table-column>
          <el-table-column :label="$t('m.creator')" align="center" prop="creator"></el-table-column>
          <el-table-column align="center" prop="createdate" :label="$t('m.createdate')"></el-table-column>
          <el-table-column :label="$t('m.transposing.modifier')" align="center" prop="modifier"></el-table-column>
          <el-table-column align="center" prop="modifydate" :label="$t('m.transposing.finish')"></el-table-column>
        </el-table>

        <el-pagination
          background
          layout="sizes, prev, pager, next, jumper"
          :page-sizes="pageSizeList"
          :page-size="rowSize"
          :current-page="page"
          :total="totalRows"
          @current-change="currentChangeInitFn"
          @size-change="handleSizeChangeInitFn"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  data(){
    return {
      formInline:{
        locationshiftcode:'',
        creator:'',
        modifydate:[],
        creatdate:[],
        productspeccode:''
      },
      tableData:[],
      dialogFormVisible:false,
      formLabelWidth:'180px',
      printVisible:false,
      popupLoading:true,
      popupData:{}
    }
  },
  watch:{},
  filters:{
    // 1 待处理 2 待拣货 3 拣货中 4 已完成 5 已取消
    stateFilter(value, lan){
      return [
        lan('m.transposing.state1'),
        lan('m.transposing.state2'),
        lan('m.transposing.state3'),
        lan('m.review.state3')
      ][value - 1]
    }
  },
  computed:{

  },
  methods:{
    toInfo(id){
      let obj = {
        componentName:'transInfo',
        parentName:'transposingHistory',
        id:id
      }
      this.$emit('switchComponent', obj)
    },
    lan(arg){
      return this.$t(arg)
    },
    init(){
      let [createstartdate, createenddate] =
        this.formInline.createdate || Array.from(2)
      let [modifystartdate, modifyenddate] =
        this.formInline.modifydate || Array.from(2)
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/locationshift/history',
        params:{
          page:this.page,
          rows:this.rowSize,
          locationshiftcode:this.formInline.locationshiftcode,
          creator:this.formInline.creator,
          createstartdate:createstartdate,
          createenddate:createenddate,
          modifystartdate:modifystartdate,
          modifyenddate:modifyenddate,
          productspeccode:this.formInline.productspeccode
        }
      }).then(({data})=> {
        for (let i = 0; i < data.records.length; i++){
          data.records[i].createdate = common.timestampToTime(
            data.records[i].createdate
          )
          data.records[i].modifydate = common.timestampToTime(
            data.records[i].modifydate
          )
        }
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
      })
    },
    search(){
      this.page = 1
      this.init()
    },
    close(formName){
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
      this.init()
    },
    add(){
      let routeData = this.$router.resolve({
        path:'addTranposing',
        query:{ opt:'add' }
      })
      window.open(routeData.href, '_self')
    },

    complete(row){
      this.$confirm(
        this.$t('m.transposing.iscomplete'),
        this.$t('m.transposing.complete'),
        {
          confirmButtonText:this.$t('m.confirm'),
          cancelButtonText:this.$t('m.cancel'),
          center:true
        }
      ).then(() => {
        this.$axios({
          method:'get',
          url:'/locationshift/accomplish',
          params:{
            id:row.locationshiftid
          }
        }).then(({data})=> {
          this.$message({
            type:'success',
            message:this.$t('m.transposing.success')
          })
          this.init()
        })
      })
      // .catch(() => {
      //   this.$message({
      //     type: "info",
      //     message: "已取消"
      //   });
      // });
    },
    edit(row){
      let locationshiftid = row.locationshiftid
      let routeData = this.$router.resolve({
        path:'addTranposing',
        query:{ id:locationshiftid, opt:'edit' }
      })
      window.open(routeData.href, '_self')
    },
    deleteRow(row){
      this.$confirm(this.$t('m.transposing.isdelete'), this.$t('m.delete'), {
        confirmButtonText:this.$t('m.confirm'),
        cancelButtonText:this.$t('m.cancel'),
        center:true
      }).then(() => {
        this.$axios({
          method:'delete',
          url:`/locationshift/${row.locationshiftid}`
        }).then(({data})=> {
          this.$message({
            type:'success',
            message:this.$t('m.deleteSuccess')
          })
          this.init()
        })
      })
    },
    getInfo(){
      this.$axios({
        method:'get',
        url:`/locationshift/${this.tableRowSelected[0].locationshiftid}`
      }).then(({data})=> {
        this.popupData = data
        this.popupLoading = false
      })
    },
    print(){
      if (this.tableRowSelected.length < 1){
        this.$message(this.$t('m.chooseprint') + this.$t('m.transposing.name'))
      } else {
        this.printVisible = true
        this.getInfo()
      }
    }
  },
  activated(){
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>